<style lang="scss" scoped>
    @import "../utils/base.scss";
    .header {
        background-color:white;
        padding: 0px;
        height: 72px;
    }
    .gcontent >>>.ivu-form-item-error-tip {
        position: relative;
        top: -24px;
        left: 100%;
        padding-left: 10px;
        line-height: 1px;
        color: #ed4014;
    }

    .gcontent >>>.ivu-form-item {
        margin-bottom: 10px;
    }
    .tip-text{
        padding:5px 0 0 10px;
        font-size:14px;
        color: rgb(197, 200, 206);
    }
    .all-div{
        height: 100vh;
        overflow-y: auto;
        background-color: #f3f3f3
    }
    .iconlabelUrl {
            width: 40px;
            height: 40px;
    }

</style>

<template>

    <div class="all-div">
        <div v-if="!ifedit" class="header" style="background-color:white;height:50px;min-width:1280px;">
            <img style="width: 283.5px;height:30px;margin:10px 0px 0px 40px;" :src="logoSrc2">
        </div>
            <div style="background-color:white;margin:8px auto 20px auto;min-height:85vh;width:1280px;">
                <template id="baseInfo" > 
                    <div class="qheader2" v-if="!ifedit">
                            <Button  style="color:#57a3f3;width:72px;float:left" to="./login">返回</Button>
                            <p style="padding-top:5px;padding-left:100px;">梧桐大数据注册申请</p>
                    </div>
                    <registered2 ref="registered" :Papplyinfo="applyinfo"></registered2>
                        <div align="center" v-if="!ifedit" style="padding-bottom:10px;">
                            <Button type="primary" style="width:72px;" @click="submint()">提交</Button>
                        </div>
                </template>
            </div>

        <div align="center" style="margin:0 0 10px 0" v-if="!ifedit">
            <p style="font-size:15px;">京ICP备05002571号 | 中国移动通信版权所有</p>
        </div>
    </div>
</template>

<script>
    import mpage from "../comp_chatter/mpage"
    import pheader from "../comp_chatter/pheader"
    import mheader from "../comp_chatter/mheader"
    import mcontainer from "../comp_chatter/mcontainer"
    import Axios from 'axios'
    import ajax from "../ajax_util"
    import inputSearch from '../base/input_search'
    import registered2 from './registered2'

    export default {
        components:{
            mpage, mheader, mcontainer, pheader,inputSearch,registered2
        },

        data (){
            const validateapplyname = (rule, value, callback) => {
                if (this.applyinfo.applyname == '') {
                    callback(new Error('请输入你的姓名'));
                } else {
                    callback()
                }
            };
            const validatePhone = (rule, value, callback) => {
                let reg = this.validateUtils.telephoneRule;
                if (this.applyinfo.applyphone == undefined || this.applyinfo.applyphone == '' || !reg.test(this.applyinfo
                    .applyphone)) {
                    callback(new Error('请填写正确的联系电话'));
                } else {
                    callback()
                }
            };
            const validatemail = (rule, value, callback) => {
                let reg = this.validateUtils.eMailRule;
                if (value != '' && value != null) {
                  if (!reg.test(value)) {
                    callback(new Error('请输入正确的邮箱!'));
                  } else {
                    callback();
                  }
                } else {
                  callback(new Error('请输入邮箱!'));
                }
            };
            const validatecard = (rule, value, callback) => {
                let reg = this.validateUtils.idCardRule;
                if (value != '' && value != null) {
                  if (!reg.test(value)) {
                    callback(new Error('请输入正确的18位身份证号码!'));
                  } else {
                    callback();
                  }
                } else {
                  callback(new Error('请输入身份证号码!'));
                }
            };
            const validatecompany = (rule, value, callback) => {
                if (this.applyinfo.applycompany == '') {
                    callback(new Error('请输入所属单位'));
                } else {
                    callback()
                }
            };
            const validatedepartment = (rule, value, callback) => {
                if (this.applyinfo.applydepartment == '') {
                    callback(new Error('请输入所属部门'));
                } else {
                    callback()
                }
            };
            const validateapplication = (rule, value, callback) => {
                if (this.applyinfo.application == '') {
                    callback(new Error('请输入注册用途'));
                } else {
                    callback()
                }
            }; 
            const validateitname = (rule, value, callback) => {
                if (this.applyinfo.itname == '') {
                    callback(new Error('请输入接口人'));
                } else {
                    callback()
                }
            };
            const validateitphone = (rule, value, callback) => {
                let reg = this.validateUtils.telephoneRule;
                if (this.applyinfo.itphone == undefined || this.applyinfo.itphone == '' || !reg.test(this.applyinfo
                    .itphone)) {
                    callback(new Error('请填写正确的联系电话'));
                } else {
                    callback()
                }
            };
            const validateidCardImg1 = (rule, value, callback) =>{
                if (this.applyinfo.idCardImg1 == '') {
                    callback(new Error('请上传身份证正面'));
                } else {
                    callback()
                }
            };
            const validateidCardImg2 = (rule, value, callback) =>{
                if (this.applyinfo.idCardImg2 == '') {
                    callback(new Error('请上传身份证反面'));
                } else {
                    callback()
                }
            };
            return{
                logoSrc2: require('../../static/image/logo3.png'),
                readonly: true, //是否只读
                labelWidth:120,
                img_url:this.CONFIG.file_url + '/open/post/id-card',
                baseInfoValidate:{
                    applyname: [{
                        required: true,
                        validator: validateapplyname,
                        trigger: 'change'
                    }],
                    applyphone: [{
                        required: true,
                        validator: validatePhone,
                        trigger: 'change'
                    }],
                    applymail:[{
                        required: true,
                        validator: validatemail,
                        trigger: 'change'
                    }],
                    applycard:[{
                        required: true,
                        validator: validatecard,
                        trigger: 'change'
                    }],
                    applycompany:[{
                        required: true,
                        validator: validatecompany,
                        trigger: 'change'
                    }],
                    applydepartment:[{
                        required: true,
                        validator: validatedepartment,
                        trigger: 'change'
                    }],
                    application:[{
                        required: true,
                        validator: validateapplication,
                        trigger: 'change'
                    }],
                    idCardImg1:[{
                        required: true,
                        validator: validateidCardImg1,
                        trigger: 'change'
                    }],
                    idCardImg2:[{
                        required: true,
                        validator: validateidCardImg2,
                        trigger: 'change'
                    }],
                },
                baseInfoValidate2:{
                    itname:[{
                        required: true,
                        validator: validateitname,
                        trigger: 'change'
                    }],
                    itphone:[{
                        required: true,
                        validator: validateitphone,
                        trigger: 'change'
                    }],
                },
                applyinfo:{
                    applyname:"",
                    applyphone:"",
                    applymail:"",
                    applycard:"",
                    labelUrl1:require('../../static/image/user.png'),
                    idCardImg1:'',
                    labelUrl2:require('../../static/image/user.png'),
                    idCardImg2:"",
                    applycompany:"",
                    applydepartment:"",
                    application:"",
                    reqDes:"",
                    itname:"",
                    itphone:""
                },
            }
        },
        computed:{

        },
        mounted(){
            console.log("this.reqId,this.draftsId---------->", this.reqId, this.draftsId)
            this.$nextTick(() => {
                if (this.reqId != null) {
                    console.log("获取表单详情---------->");
                    this.getApplyInfo(this.reqId); //获取表单详情
                }
            })
        },
        methods: {
            validate() {
                var isSubmit = false
                this.$refs["baseInfo"].validate((valid) => {
                    if (valid) {
                        this.$refs["baseInfo2"].validate((valid2) => {
                            if (valid2) {
                                isSubmit = true
                            } else {
                                isSubmit = false
                                this.$Message.error('请填写接口人信息必填项');
                            }
                        })
                    } else {
                        this.$Message.error('请填写个人信息必填项');
                    }
                })
                console.log(isSubmit)
                return isSubmit
            },
            handleFormatError1(file) {
                this.$Message.error("图片格式不正确,请上传正确的图片格式");
            },
            handleUploadicon1(file){                
                var that = this;
                var formdata = new FormData();
                formdata.append("file", file);
                var img_url = that.img_url;
                Axios({
                    url: img_url,
                    method: 'post',
                    data: formdata,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                }).then(response => {
                    console.log('response',response)
                    this.applyinfo.labelUrl1 = response.data
                    this.applyinfo.idCardImg1 = window.URL.createObjectURL(file);
                })
            },
            uploadSuccess(res, file, fileList){
                let that = this;
                console.log('res._STATUS == 1',res)

            },
            handleUploadicon2(file){                
                var that = this;
                var formdata = new FormData();
                formdata.append("file", file);
                var img_url = that.img_url;
                Axios({
                    url: img_url,
                    method: 'post',
                    data: formdata,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                }).then(response => {
                    console.log('response',response)
                    this.applyinfo.labelUrl2 = response.data
                    this.applyinfo.idCardImg2 = window.URL.createObjectURL(file);
                })
            },
            setimg(img_name1, img_name2){
                var url1 = this.CONFIG.file_url + '/get/' + img_name1;
                var that = this;
                var result = {}
                Axios.get(url1,{responseType: 'blob'
                        }).then(function(response){
                            var blob = new Blob([response.data])
                            var href = window.URL.createObjectURL(blob)
                            result['img1'] = href
                            that.applyinfo.idCardImg1 = href
                            return href
                        })

                var url2 = this.CONFIG.file_url + '/get/'+ img_name2;
                Axios.get(url2,{responseType: 'blob'
                        }).then(function(response){
                            console.log('setimg',response)
                            var blob = new Blob([response.data])
                            var href = window.URL.createObjectURL(blob)
                            console.log('href',href)
                            result['img2'] = href
                            that.applyinfo.idCardImg2 = href
                            return href
                        })
                return result
            },
            getApplyInfo(reqId) {
                var url = this.CONFIG.url_know + '/get-register/' + reqId;
                var that = this;
                ajax.get({
                    url:url,
                    that:that,
                    success:function(data){
                        console.log('getApplyInfo',data)
                        var temp = data
                        var temp1 = {}
                        var img_set = that.setimg(temp.idCardImg1, temp.idCardImg2)
                        temp1.idCardImg1 = img_set['img1']
                        temp1.idCardImg2 = img_set['img2']
                        temp1.applyname = temp.user_name 
                        temp1.applyphone = temp.phone
                        temp1.applymail = temp.email
                        temp1.applycard = temp.id_card
                        temp1.applycompany = temp.company 
                        temp1.applydepartment = temp.department
                        temp1.application = temp.purpose
                        temp1.reqDes = temp.reqDes
                        temp1.itname = temp.itContact
                        temp1.itphone = temp.itContactPhone

                        that.applyinfo = temp1
                        console.log('that.applyinfo',that.applyinfo)
                    }
                })

            },
            getInfo() {
                var t = JSON.stringify(this.applyinfo)
                var temp1 = JSON.parse(t)
                var temp = {
                    object:{},
                    puslicInfo:{},
                }
                temp.object.user_name = temp1.applyname
                temp.object.phone = temp1.applyphone
                temp.object.email = temp1.applymail
                temp.object.id_card = temp1.applycard
                temp.object.company = temp1.applycompany
                temp.object.department = temp1.applydepartment
                temp.object.purpose = temp1.application
                temp.object.reqDes = temp1.reqDes
                temp.object.itContact = temp1.itname
                temp.object.itContactPhone = temp1.itphone
                temp.object.idCardImg1 = temp1.labelUrl1
                temp.object.idCardImg2 = temp1.labelUrl2
                var publicInfo = this.utils.setPublicInfoInfo('',0,0,temp.object.purpose)
                temp.puslicInfo = publicInfo
                return temp
            },
            submint(){
                if(this.$refs['registered'].validate()){
                    var temp1 = this.$refs['registered'].getInfo01()
                    console.log('submint',temp1)
                    var temp = temp1.object
                    var url = this.CONFIG.url_know + '/register';
                    var that = this;
                    ajax.post({
                        url:url,
                        that:that,
                        data:temp,
                        success:function(data){
                            console.log('submint:',data)
                            if(data === -2){
                                that.$Message.error({
                                    content:"验证码错误或已失效",
                                    duration: 3
                                });
                                that.$refs['registered'].changImg()
                            }
                            if (data === -1) {
                                that.$Message.error({
                                    content:"注册重复",
                                    duration: 3
                                });
                                that.$refs['registered'].changImg()
                            }
                            if (data === 0) {
                                that.$Message.error({
                                    content:"未找到对接人或对接人不是运营人员",
                                    duration: 3
                                });
                                that.$refs['registered'].changImg()
                            }
                            if (data === 1) {
                                that.$Message.success({
                                    content:"提交成功，待审批人进行审批",
                                    duration: 3
                                });
                            }
                        }
                    })
                }
            },
        },
        props:{
            ifedit: {
                type: Boolean,
                default: false,
            },
            reqId: {
                default: null
            },
        },  
    }
</script>
